<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>My JSP 'index.jsp' starting page</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
		<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="js/calc.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<style type="text/css">
			.Table1{width: 690px;height: 88px;background: url('img/jj_titlebg.jpg') no-repeat -2px 0px;}
			.Table1 td{width: 102px;cursor: pointer;vertical-align: top;}
			.Table1 th{cursor: pointer;vertical-align: top;}
			.Table1 td table{width: 100%;height: 70%;margin-top: 10px;}
			.Table1 td table th{font-family: "微软雅黑"; COLOR: #fff;font-size: 30px;}
			.Table1 td table td{color: #f0c782;text-align: center;width: auto;}
			.Table1 td table td img{vertical-align: middle;}
			.Table1 th table{width: 100%;height: 70%}
			.Table1 th table th{font-family: "微软雅黑"; COLOR: #fff;font-size: 14px;vertical-align: middle;}
			.Table2{width: 690px;}
			.Table2 td{background: url('img/jj_conbg.gif') repeat-y -2px 0px;text-align: center;}
			.Table3{width: 690px;}
			.Table3 td{background: url('img/simple_bt.gif') repeat-y -2px 0px;height: 23px;}
			.Table4{width: 642px;}
			.Table4 td{border: #dedede 1px solid;width: 106px;height: 74px;font-size: 14px;background: none;text-align: center;width: auto;cursor: pointer;}
			.Table6{width: 260px;background-color: #f3f3f3}
			.Table6 th{color: #535353;font-weight: bold;font-size: 14px;background: url('img/simple_line.gif') repeat-x 0px 39px;height: 40px;text-align: left;padding-left: 10px;}
			.selectTd{background: url('img/jj_tithover.png') no-repeat 0px 0px;}
			.simple_input{border: 0px;text-align: right;line-height: 49px;padding-left: 85px;padding-right: 70px;font-family: "Arial"; background: url('img/simple_inputbg.gif'); height: 49px;color: #bc6300;width: 643px;font-size: 35px;}
			#calc{z-index: 101px;position: absolute;top: 73px;right: 23px;border: #a8a8a8 1px solid;background-color: #d3d3d3;width: 255px;height: 250px;display: none;}
			#ReadOut{border: 0;line-height: 34px;width: 178px;background:url("img/calc_input.gif");height: 34px;color: #000;font-size: 25px;font-weight: bold;}
			#HideCalc{width: 54px;height: 34px;background: url('img/calc_input.gif') 0px -39px;border: 0px;cursor: pointer;}
			.calcNum{margin-left: 2px;margin-top:4px;margin-bottom:4px;width: 55px;background: url('img/calc_input.gif') 0px -75px;height: 40px;color: #ffffff;font-size: 20px;cursor: pointer;font-weight: bold;border: 0px;}
			.calcSign{margin-left: 2px;margin-top:4px;margin-bottom:4px;width: 55px;background: url('img/calc_input.gif') 0px -117px;height: 40px;color: #ffffff;font-size: 20px;cursor: pointer;font-weight: bold;border: 0px;}
			.btnClear{margin-left: 2px;margin-top:4px;margin-bottom:4px;width: 55px;background: url('img/calc_input.gif') 0px -158px;height: 40px;color: #ffffff;font-size: 20px;cursor: pointer;font-weight: bold;border: 0px;}
			a.Add{width: 161px;height: 70px;line-height: 70px;display: block;background: url('img/simple_btn.gif') no-repeat;}
			a.Add:hover{width: 161px;height: 70px;line-height: 70px;display: block;background: url('img/simple_btn.gif') no-repeat 0px -71px;}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#HideCalc").hover(function(){
					$(this).css("background","url('img/calc_input.gif') -58px -39px");
				},function(){
					$(this).css("background","url('img/calc_input.gif') 0px -39px");
				});
				$(".calcNum").hover(function(){
					$(this).css("background","url('img/calc_input.gif') -58px -75px");
				},function(){
					$(this).css("background","url('img/calc_input.gif') 0px -75px");
				});
				$(".calcSign").hover(function(){
					$(this).css("background","url('img/calc_input.gif') -58px -117px");
				},function(){
					$(this).css("background","url('img/calc_input.gif') 0px -117px");
				});
				$(".btnClear").hover(function(){
					$(this).css("background","url('img/calc_input.gif') -58px -158px");
				},function(){
					$(this).css("background","url('img/calc_input.gif') 0px -158px");
				});
				$(".Table4 td").click(function(){
					$(".Table4 td").css("background-image","");
					$(this).css("background-image","url('img/simple_abg.png')");
					$("#billTypeName").val($(this).html());
				});
			});
		</script>
	</head>
	<body style="background-image: url('img/bg.jpg');">
		<center>
			<jsp:include page="tiles-components/top.jsp"></jsp:include>
			<div style="background: url('img/conbg.gif') repeat-y;width: 998px;">
				<div style="height: 40px;width: 100%;"></div>
				<table style="width: 100%;"> 
					<tr>
						<td width="720px">
							<center>
								<table width="100%" height="620px" style="display: none;" id="DateTableLoading">
									<tr>
										<td align="center">
											<img src="img/loadding.gif">
										</td>
									</tr>
								</table>
								<table id="DateTable" class="Table1">
									<tr>
										<td>
											<table>
												<tr>
													<th>28</th>
												</tr>
												<tr>
													<td>
														<img src="img/ico_zhi.gif" /> 3367元
													</td>
												</tr>
											</table>
										</td>
										<td>
											<table>
												<tr>
													<th>29</th>
												</tr>
												<tr>
													<td>
														<img src="img/ico_zhi.gif" /> 3367元
													</td>
												</tr>
											</table>
										</td>
										<td>
											<table>
												<tr>
													<th>30</th>
												</tr>
												<tr>
													<td>
														<img src="img/ico_zhi.gif" /> 3367元
													</td>
												</tr>
											</table>
										</td>
										<td>
											<table>
												<tr>
													<th>31</th>
												</tr>
												<tr>
													<td>
														<img src="img/ico_zhi.gif" /> 3367元
													</td>
												</tr>
											</table>
										</td>
										<td>
											<table>
												<tr>
													<th>1</th>
												</tr>
												<tr>
													<td>
														<img src="img/ico_zhi.gif" /> 3367元
													</td>
												</tr>
											</table>
										</td>
										<td class="selectTd">
											<table>
												<tr>
													<th>2</th>
												</tr>
												<tr>
													<td>
														<img src="img/ico_zhi.gif" /> 3367元
													</td>
												</tr>
											</table>
										</td>
										<th>
											<table>
												<tr>
													<th>2013年<br>4月</th>
												</tr>
											</table>
										</th>
									</tr>
								</table>
								<table class="Table2">
									<tr>
										<td>
											<div style="width: 100%;height: 100px;position: relative;">
												<table width="100%" height="100px">
													<tr>
														<td>
															<input name="money" id="money_text" onkeyup="clearNoNum(this)" class="simple_input" value="0" type="text" />
														</td>
													</tr>
												</table>
												<div style="position: absolute;right: 38px;top: 30px;cursor: pointer;" onclick="CalcShow()"><img src="img/simple_counter.gif" /></div>
												<div id="calc">
													<form name="Keypad" id="Keypad">
														<center>
															<div style="width: 97%;margin: 5px 0px;">
																<table width="100%" height="45px">
																	<tr>
																		<td style="background: #000000;text-align: center;">
																			<input name="ReadOut" onkeyup="clearNoNum(this)" id="ReadOut" style="padding-left: 5px;" value="0" type="text" />
																			<input onclick="resultShow($('#money_text'))" name="btnClear" id="HideCalc" type="button" />
																		</td>
																	</tr>
																</table>
															</div>
															<div style="background-color: #ebebeb;width: 97%">
																<input name="btnOne" class="calcNum" onclick="NumPressed(1)" type="button" value="1" />
																<input name="btnTwo" class="calcNum" onclick="NumPressed(2)" type="button" value="2" />
																<input name="btnThree" class="calcNum" onclick="NumPressed(3)" type="button" value="3" />
																<input name="btnPlus" class="calcSign" onclick="Operation('+')" type="button" value="+" />
																<input name="btnFour" class="calcNum" onclick="NumPressed(4)" type="button" value="4" />
																<input name="btnFive" class="calcNum" onclick="NumPressed(5)" type="button" value="5" />
																<input name="btnSix" class="calcNum" onclick="NumPressed(6)" type="button" value="6" />
																<input name="btnMinus" class="calcSign" onclick="Operation('-')" type="button" value="-" />
																<input name="btnSeven" class="calcNum" onclick="NumPressed(7)" type="button" value="7" />
																<input name="btnEight" class="calcNum" onclick="NumPressed(8)" type="button" value="8" />
																<input name="btnNine" class="calcNum" onclick="NumPressed(9)" type="button" value="9" />
																<input name="btnMinus" class="calcSign" onclick="ClearNum()" type="button" value="◀" />
																<input name="btnClear" class="btnClear" onclick="Clear()" type="button" value="C" />
																<input name="btnZero" class="calcNum" onclick="NumPressed(0)" type="button" value="0" />
																<input name="btnDecimal" class="calcNum" onclick="Decimal()" type="button" value="." />
																<input name="btnEquals" class="calcSign" onclick="Operation('=')" type="button" value="=" />
															</div>
														</center>
													</form>
												</div>
											</div>
											<center>
												<table class="Table4">
													<tr>
														<td style="background-color: #F7F9EA">餐饮饮食</td>
														<td style="background-color: #F7F9EA">水果零食</td>
														<td style="background-color: #F7F9EA">日常用品</td>
														<td style="background-color: #FEF6EC">柴米油盐</td>
														<td style="background-color: #FEF6EC">物业水电</td>
														<td style="background-color: #F7F9EA">医疗保健</td>
													</tr>
													<tr>
														<td style="background-color: #F7F9EA">交通车费</td>
														<td style="background-color: #F7F9EA">话费网费</td>
														<td style="background-color: #F7F9EA">养车油费</td>
														<td style="background-color: #FEF6EC">旅行娱乐</td>
														<td style="background-color: #FEF6EC">搏彩彩票</td>
														<td style="background-color: #F7F9EA">书报影像</td>
													</tr>
													<tr>
														<td style="background-color: #F1FAFD">数码产品</td>
														<td style="background-color: #F1FAFD">教育培训</td>
														<td style="background-color: #F1FAFD">服饰装扮</td>
														<td style="background-color: #FDEFF5">化妆美容</td>
														<td style="background-color: #FDEFF5">人际往来</td>
														<td style="background-color: #F7F9EA">礼品礼金</td>
													</tr>
													<tr>
														<td style="background-color: #FDFEF3">孝敬长辈</td>
														<td style="background-color: #FDFEF3">房产车产</td>
														<td style="background-color: #FDFEF3">投资亏损</td>
														<td style="background-color: #F1FAFD">电器家具</td>
														<td style="background-color: #F1FAFD">其他杂项</td>
														<td style="color: #2b9501;font-weight: bold;font-size:16px;background-color: #EDF8D3">收入</td>
													</tr>
												</table>
												<div style="height: 20px;width: 100%;"></div>
												<table width="642px">
													<tr>
														<td style="width: auto;background: none;text-align: left">
															<div style="width: 480px;height: 70px;background : url('img/simple_pic.gif') no-repeat;">
																<table width="100%" height="100%">
																	<tr>
																		<td width="70px" style="width: auto;background: none;">
																			<div style="width: 70px;height: 100%" > &nbsp; </div>
																		</td>
																		<td style="width: 410px;background: none;">
																			<input type="hidden" id="billTypeName" style="display: none;" value="" />
																			<textarea id="remark" style="width: 99%;height: 68px;border: 0px;overflow: hidden;text-align: left;font-size: 14px;color: #cccccc">备注，限20个字符以内（可不填）</textarea>
																		</td>
																	</tr>
																</table>
															</div>
														</td>
														<td style="width: auto;background: none;">
															<a class="Add" href="javascript:void(0)"></a>
														</td>
													</tr>
												</table>
												<div style="height: 20px;width: 100%;"></div>
											</center>
										</td>
									</tr>
								</table>
								<table class="Table3">
									<tr>
										<td> &nbsp; </td>
									</tr>
								</table>
								<table id="listLoading" width="690px" height="270px">
									<tr>
										<td align="center">
											<img src="img/loadding.gif" />
										</td>
									</tr>
								</table>
								<iframe id="iframe" width="690px" height="270px" frameborder="0" marginheight="0" marginwidth="0" style="margin-top: 10px;"></iframe>
							</center>
						</td>
						<td valign="top">
							<table class="Table6">
								<tr>
									<th>
										30天内消费比例
									</th>
								</tr>
								<tr>
									<td>
										<script src="js/highcharts.js"></script>
										<script src="js/exporting.js"></script>
										<div id="container" style="max-width: 260px; height: 400px; margin:0px"></div>
									</td>
								</tr>
							</table>
							<table class="Table6" style="margin-top: 10px;">
								<tr>
									<th>
										最近日均消费状况
									</th>
								</tr>
								<tr>
									<td>
										<div id="container2" style="max-width: 260px; height: 400px; margin: 0px"></div>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
				<div style="height: 20px;width: 100%;"></div>
			</div>
			<div><img src="img/con_bottom.gif" /></div>
			<jsp:include page="tiles-components/footer.jsp"></jsp:include>
		</center>
	</body>
</html>
